<template>

	<view class="content">
		<view class="bar" :style="'height:'+statusHeight+'px'"></view>
		<uni-nav-bar backgroundColor="none" title="登录" border="false">
		</uni-nav-bar>

		<view class="top"><strong>校园智能报修系统</strong></view>

		<view class="loginbox">
			<view class="item">
				<image src="../../static/icon/username.png" class="icon"></image>
				<input class="username" v-model="username" placeholder="请输入手机号" maxlength="11" />
			</view>

			<view class="item">
				<image src="../../static/icon/password.png" class="icon"></image>
				<input type="safe-password" class="username" v-model="password" placeholder="请输入密码" />
			</view>
			<view class="login" @click="login">
				登录
			</view>
			
			<!-- <view class="tip">
				首次登陆则默认注册为本系统的普通用户
			</view> -->
			<view class="login" style="margin-top: 20rpx;" @click="zhuce">
				注册
			</view>
		</view>



	</view>
</template>

<script setup>
	import {onLoad} from "@dcloudio/uni-app";
	import {ref} from 'vue'
	import api from '../../api/api'

	let statusHeight = ref(null);
	let username = ref(null);
	let password = ref(null);
	onLoad((options) => {
		//获取状态栏高度
		uni.getSystemInfo({
			success: function(res) {
				statusHeight.value = res.statusBarHeight
			}
		})
	})
	// 跳转注册页
	const zhuce=()=>{
		uni.navigateTo({
			url:'/pages/register/register'
		})
	}
	// 登录
	const login = () => {
		api.login({
			username: username.value,
			password: password.value
		}).then(res => {
			if (res.status == 200) {
				uni.setStorageSync('token', res.data.token)
				api.getUserInfo({
					url: '',
					method: "GET",
				}).then(res => {
					if (res.status == 200) {
						setTimeout(function() {
							uni.setStorageSync('info', res.data.data[0])
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500
							})
							setTimeout(()=>{
								uni.switchTab({
									url: '/pages/index/index'
								})
							},1500)
							

						})
					}

				})
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 1500
				})
			}
		})
	}
</script>

<style lang="scss">
	.uni-navbar {
		.uni-navbar__content {
			border: 0 none !important;
		}
	}

	.content {
		background-color: white;
		height: 100vh;
		background: linear-gradient(to top, #f5f5f5 60%, #C7FFF2 93%, #A6DEFF 100%);

		.top {
			width: 100%;
			// line-height:600rpx;
			margin-top: 190rpx;
			text-align: center;
			font-size: 60rpx;
			font-weight: bold;
			color: #0b96ff;
		}

		.loginbox {
			padding: 120rpx 80rpx 0 80rpx;

			.item {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: solid 1rpx #E6E6E6;
				height: 94rpx;

				.icon {
					width: 56rpx;
					height: 56rpx;
					margin-right: 56rpx;
				}

				.username {
					font-size: 32rpx;
				}
			}

			.login {
				line-height: 92rpx;
				background-color: #2F9CD9;
				text-align: center;
				color: white;
				border-radius: 8rpx;
				margin-top: 120rpx;
				font-size: 32rpx;
			}
			.tip{
				margin-top: 20rpx;
				text-align: center;
				font-size: 24rpx;
			
			}

		}

	}
</style>
